<template>
    <div class="order_detail_main">
        <div class="detail_container_header">
            <el-form label-position="left" label-width="auto">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="订单编号：">
                            {{ Data.detailInfo.orderSn }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="下单时间：">
                            {{ Data.detailInfo.createdAt }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="订单类型：">
                            {{ transformStream(Data?.detailInfo?.orderType, 'ORDER_TYPE_TRANSLATE_OPTIONS') }}
                        </el-form-item>
                    </el-col>
                    <el-col v-if="[3, 4, 5].includes(Data?.detailInfo?.orderType)" :span="12">
                        <el-form-item label="拼团活动：">
                            <span v-if="checkPermission('group_list:query')" class="span_btn" @click="jumpActivity">
                                {{ Data.detailInfo.activityName }}
                            </span>
                            <span v-else>
                                {{ Data.detailInfo.activityName }}
                            </span>
                        </el-form-item>
                    </el-col>
                    <el-col v-if="[3, 4, 5].includes(Data?.detailInfo?.orderType)" :span="12">
                        <el-form-item label="拼团编号：">
                            {{ Data.detailInfo.groupSn }}
                        </el-form-item>
                    </el-col>
                    <el-col v-if="Data?.detailInfo?.orderType === 7" :span="12">
                        <el-form-item label="满减活动：">
                            <span
                                v-for="(item, idx) in Data.detailInfo.goodsMapActivity || []"
                                :key="item.activityId"
                                @click="jumpFullActivity(item)">
                                <span class="span_btn"> {{ item.activityName }}</span>
                                {{ idx === Data.detailInfo.goodsMapActivity?.length - 1 ? '' : '/ ' }}
                            </span>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="商家备注：">
                            <div class="order_remark_black">
                                <span ref="orderRemark" v-show="Data.detailInfo?.sellerRemarks" class="order_remark">
                                    <el-tooltip v-if="shopRemarkTip" effect="dark" placement="left-start">
                                        <template #content>
                                            <div style="max-width: 250px">{{ Data.detailInfo?.sellerRemarks }}</div>
                                        </template>
                                        <span>
                                            {{ Data.detailInfo?.sellerRemarks }}
                                        </span>
                                    </el-tooltip>
                                    <span v-else>
                                        {{ Data.detailInfo?.sellerRemarks }}
                                    </span>
                                </span>
                                <img @click="editRemarkHandler" src="@/assets/imgs/mall/order/icon_edit.png" />
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="herder_button" v-if="Data.detailInfo?.orderStatus">
                <div class="dot"></div>
                {{ translateOrderCode(Data.detailInfo?.orderStatus, Data.detailInfo?.isSelfPickup) }}
            </div>
        </div>
        <div class="detail_container_step">
            <el-steps align-center :active="Data.activeStep">
                <el-step v-for="(item, index) in Data.stepList" :key="item.key">
                    <template #title>
                        <div class="step_title">
                            {{ item.name }}
                            <span v-if="item.remark" class="step_note">（{{ item.remark }}）</span>
                        </div>
                    </template>
                    <template #icon>
                        <div class="step_num close" v-if="item.isComplete === 2">
                            <el-icon><Close /></el-icon>
                        </div>
                        <div class="step_num done" v-else-if="index < Data.activeStep">
                            <el-icon><Check /></el-icon>
                        </div>
                        <div class="step_num current" v-else-if="index === Data.activeStep">
                            {{ index + 1 }}
                        </div>
                        <div class="step_num wait" v-else-if="index > Data.activeStep">{{ index + 1 }}</div>
                    </template>
                    <template #description>
                        <div class="step_desc">{{ item.time }}</div>
                    </template>
                </el-step>
            </el-steps>
        </div>
        <div class="detail_container_order">
            <div class="title"><span>订单信息</span><el-divider /></div>
            <div class="contents">
                <div class="contents_item">
                    <div class="sub_title">收货人信息</div>
                    <div>
                        <span class="label">收货人：</span>
                        <span class="desc">{{ Data.detailInfo.consigneeName || '-' }}</span>
                    </div>
                    <div>
                        <span class="label">手机号：</span>
                        <span class="desc">{{ Data.detailInfo.consigneeMobile || '-' }}</span>
                    </div>
                    <div v-if="!Data.detailInfo?.isSelfPickup">
                        <span class="label">收货地址：</span>
                        <span class="desc">
                            {{
                                (Data.detailInfo?.consigneeProvince || '') +
                                    (Data.detailInfo?.consigneeCounty || '') +
                                    (Data.detailInfo?.consigneeCity || '') +
                                    (Data.detailInfo?.consigneeAddress || '') || '-'
                            }}</span
                        >
                    </div>
                </div>
                <div class="contents_item">
                    <div class="sub_title">配送信息</div>
                    <div>
                        <span class="label">配送方式：</span>
                        <!-- 1 物流配送 2 商家配送 -->
                        <span class="desc">
                            <span v-if="!Data.detailInfo.consigneeName && Data?.detailInfo?.orderType === 6"> - </span>
                            <span v-else>
                                {{ transformStream(Data.detailInfo?.deliveryMethod, 'DELIVERY_TYPE_OPTIONS') || '-' }}
                            </span>
                        </span>
                    </div>
                    <div v-if="Data.detailInfo.isSelfPickup">
                        <span class="label">自提点：</span>
                        <span class="desc">
                            <span> {{ Data.detailInfo?.selfLiftSite?.selfLiftName || '-' }} </span>
                        </span>
                    </div>
                    <div v-else>
                        <span class="label">运费：</span>
                        <span class="desc">
                            <span v-if="!Data.detailInfo.consigneeName && Data?.detailInfo?.orderType === 6"> - </span>
                            <span v-else>
                                {{
                                    priceFilter(
                                        floatDivide(
                                            Number(Data.detailInfo.logisticsFee) +
                                                Number(Data.detailInfo.freeFreightFee),
                                            100
                                        )
                                    )
                                }}
                                元
                            </span>
                        </span>
                    </div>
                </div>
                <div class="contents_item">
                    <div class="sub_title">支付信息</div>
                    <div>
                        <span class="label">支付金额：</span>
                        <span class="desc">
                            {{ priceFilter(floatDivide(Data.detailInfo.orderAmountTotal, 100)) }} 元
                        </span>
                    </div>
                    <div>
                        <span class="label">支付方式：</span>
                        <span class="desc">{{ Data.detailInfo.payMethod || '-' }}</span>
                    </div>
                    <div>
                        <span class="label">支付时间：</span>
                        <span class="desc">{{ Data.detailInfo.payAt || '-' }}</span>
                    </div>
                    <div>
                        <span class="label">交易单号：</span>
                        <span class="desc">{{ Data.detailInfo.outTradeNo || '-' }}</span>
                    </div>
                </div>
                <div class="contents_item">
                    <div class="sub_title">买家信息</div>
                    <div>
                        <span class="label">昵称：</span>
                        <span class="desc">{{ Data.detailInfo.nickname || '-' }}</span>
                    </div>
                    <div>
                        <span class="label">手机号：</span>
                        <span class="desc">{{ Data.detailInfo.buyerMobile || '-' }}</span>
                    </div>
                    <div>
                        <span class="label">备注：</span>
                        <span class="desc">{{ Data.detailInfo.buyerRemarks || '-' }}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="detail_container_logistics" v-if="Data.logInfoList && Data.logInfoList.length">
            <div class="title">
                <span>物流信息 </span><el-divider v-if="Data.logInfoList.length === 1" />
                <div v-else style="height: 10px"></div>
            </div>
            <el-tabs v-model="activePackageName" v-if="Data.logInfoList.length > 1">
                <el-tab-pane
                    v-for="(item, index) in Data.logInfoList"
                    :key="item.id"
                    :label="'包裹' + (index + 1)"
                    :name="item.id">
                </el-tab-pane>
            </el-tabs>
            <div v-for="item in Data.logInfoList" :key="item.id" v-show="activePackageName === item.id">
                <div class="contents_item_left">
                    <div>
                        <span class="label">发货方式：</span>
                        <span class="desc">快递配送</span>
                    </div>
                    <div>
                        <span class="label">发货时间：</span>
                        <span class="desc">{{ item.deliveryAt }}</span>
                    </div>
                    <div>
                        <span class="label">发货人：</span>
                        <span class="desc">{{ item.deliveryName }}</span>
                    </div>
                    <div>
                        <span class="label">快递公司：</span>
                        <span class="desc">{{ item.logisticsCompany }}</span>
                    </div>
                    <div>
                        <span class="label">快递单号：</span>
                        <span class="desc">{{ item.logisticsNo }}</span>
                    </div>
                    <div>
                        <img src="" alt="" />
                        <div v-for="e in item.good" :key="e.id" class="logistics_goods_item">
                            <img :src="e.goodsImg" />
                            <div class="logistics_goods_item_info">
                                <div class="logistics_goods_item_info_name">{{ e.goodsName }}</div>
                                <div class="logistics_goods_item_info_num">数量：{{ e.buyNum }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="contents_item_right" v-if="item.state">
                    <div class="desc">物流状态：{{ transformStream(item.state, 'LOGISTICS_STATE_OPTIONS') }}</div>
                    <div class="step" v-for="(ele, index) in item.arr" :key="index">
                        <div>
                            <div class="step_dot"></div>
                            <div class="step_line"></div>
                        </div>
                        <div class="step_right">
                            <div class="step_time">{{ ele.time }}</div>
                            <div class="step_content">{{ ele.context }}</div>
                        </div>
                    </div>
                </div>
                <div class="contents_item_right" v-else>
                    <div class="desc">未查询到物流信息</div>
                </div>
            </div>
        </div>
        <div class="detail_container_product">
            <div class="title"><span>商品信息</span><el-divider /></div>
            <el-table stripe :data="Data.goods">
                <el-table-column prop="goodsName" label="商品名称" width="360">
                    <template #default="scope">
                        <div class="goods_item">
                            <img :src="scope.row.goodsImg" alt="" />
                            <div class="goods_item_info">
                                <div class="goods_item_name">
                                    <el-tooltip effect="dark" :content="scope.row.activityName" placement="top">
                                        <span>
                                            <div
                                                v-if="
                                                    scope.row.activityName &&
                                                    [7].includes(Data.detailInfo.orderType) &&
                                                    scope.row.fullReduceGoodAmount
                                                "
                                                class="sign">
                                                满减
                                            </div>
                                        </span>
                                    </el-tooltip>
                                    {{ scope.row.goodsName }}
                                </div>
                                <el-tooltip effect="dark" placement="top">
                                    <template #content>
                                        <div class="w200">
                                            <span v-for="(el, idx) in scope.row.skuExtInfo" :key="idx">
                                                {{ el.keyAttributeName }}:{{ el.attributeValue }}
                                                {{ idx < scope.row.skuExtInfo?.length - 1 ? ';' : '' }}
                                            </span>
                                        </div>
                                    </template>
                                    <div class="goods_item_sku">
                                        <span v-for="(el, idx) in scope.row.skuExtInfo" :key="idx">
                                            {{ el.keyAttributeName }}:{{ el.attributeValue }}
                                            {{ idx < scope.row.skuExtInfo?.length - 1 ? ';' : '' }}
                                        </span>
                                    </div>
                                </el-tooltip>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="单价" min-width="100">
                    <template #default="scope">
                        <div v-if="Data.detailInfo?.orderType === 6">
                            <span v-if="scope.row.sellPrice">{{ floatDivide(scope.row.sellPrice, 100) }}元+</span>
                            <span> {{ floatDivide(scope.row.goodPoints, 100) }}积分</span>
                        </div>
                        <div v-else>
                            <span>￥{{ floatDivide(scope.row.goodsPrice, 100) }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="buyNum" label="数量" min-width="80"></el-table-column>
                <el-table-column prop="discountAmount" label="优惠" min-width="80">
                    <template #default="scope">
                        <el-tooltip
                            v-if="showGoodDiscountTooltip(scope.row)"
                            class="box-item"
                            effect="dark"
                            placement="top">
                            <template #content>
                                <div>
                                    <div v-if="showDiscount(scope.row)">
                                        {{ discountName() }}优惠： ￥{{
                                            priceFilter(floatDivide(showDiscount(scope.row), 100))
                                        }}
                                    </div>
                                    <div v-if="scope.row?.couponFee">
                                        优惠券优惠：￥{{ priceFilter(floatDivide(scope.row.couponFee, 100)) }}
                                    </div>
                                </div>
                            </template>
                            <span>
                                ￥{{ priceFilter(floatDivide(showDiscount(scope.row) + scope.row.couponFee, 100)) }}
                            </span>
                        </el-tooltip>
                        <span v-else>
                            ￥{{ priceFilter(floatDivide(showDiscount(scope.row) + scope.row.couponFee, 100)) }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column
                    v-if="
                        (Data.detailInfo?.orderType === 1 && Data.detailInfo.discountPropReducePrice) ||
                        Data.detailInfo?.orderType === 6
                    "
                    prop=""
                    label="积分抵扣"
                    min-width="80">
                    <template #default="scope">
                        <!-- 积分抵扣的是元，积分兑换的是展示积分 -->
                        <div v-if="Data.detailInfo?.orderType === 1 && scope.row.pointsFee">
                            ￥{{ priceFilter(floatDivide(scope.row.pointsFee, 100)) }}
                        </div>
                        <div v-if="Data.detailInfo?.orderType === 6">{{ floatDivide(scope.row.points, 100) }}积分</div>
                    </template>
                </el-table-column>
                <el-table-column prop="total" label="小计" min-width="80">
                    <template #default="scope">
                        <!-- 积分抵扣展示实付，积分兑换也是展示实付 -->
                        <div>￥{{ priceFilter(floatDivide(scope.row.sellAmount, 100)) }}</div>
                    </template>
                </el-table-column>
                <!-- 上门自提订单不需要商品发货状态 -->
                <el-table-column v-if="!Data.detailInfo?.isSelfPickup" prop="" label="发货状态" min-width="80">
                    <template #default="scope">
                        <div v-if="scope.row.goodsType > 1">-</div>
                        <div v-else-if="Data.detailInfo.orderStatus == 1">未发货</div>
                        <div v-else>
                            {{ scope.row.goodsStatus == '1' ? '已发货' : '未发货' }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="refundStatusName" label="售后状态" min-width="80">
                    <template #default="scope">
                        <div v-if="scope.row.refundStatus > 0" class="status_refund">售后</div>
                        <div v-else></div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="amount_footer">
                <div>
                    <div>商品总计：</div>
                    <div>运费：</div>
                    <div v-if="showDiscounts()">{{ discountName() }}优惠：</div>
                    <div v-if="Data.detailInfo?.couponFee">优惠券优惠：</div>
                    <!-- yingyingying：积分抵扣的是元，积分兑换的是展示积分 -->
                    <div
                        v-if="
                            (Data.detailInfo?.orderType === 1 && Data.detailInfo.discountPropReducePrice) ||
                            Data.detailInfo?.orderType === 6
                        ">
                        积分抵扣：
                    </div>
                    <div>
                        <span>实付金额：</span>
                    </div>
                </div>
                <div>
                    <!-- 总计 -->
                    <div v-if="Data.detailInfo?.orderType === 6">
                        <span v-if="goodsTotal">{{ priceFilter(floatDivide(goodsTotal, 100)) }}元+</span>
                        <span>{{ floatDivide(Data.detailInfo?.totalPoints, 100) || 0 }}积分</span>
                    </div>
                    <div v-else class="price">￥{{ priceFilter(floatDivide(goodsTotal, 100)) }}</div>
                    <!-- 运费 -->
                    <div class="price">
                        ￥{{
                            priceFilter(
                                floatDivide(
                                    Number(Data.detailInfo.logisticsFee) + Number(Data.detailInfo.freeFreightFee),
                                    100
                                )
                            )
                        }}
                    </div>
                    <!-- 优惠 -->
                    <div v-if="Data.detailInfo?.orderType === 7 && Data.detailInfo.fullReduceAmount">
                        ￥{{ priceFilter(floatDivide(Data.detailInfo.fullReduceAmount, 100)) }}
                    </div>
                    <div v-else-if="Data.detailInfo?.discountAmount" class="price">
                        ￥{{ priceFilter(floatDivide(Data.detailInfo.discountAmount, 100)) }}
                    </div>
                    <!-- 优惠券优惠 -->
                    <div v-if="Data.detailInfo?.couponFee" class="price">
                        ￥{{ priceFilter(floatDivide(Data.detailInfo.couponFee, 100)) }}
                    </div>
                    <!-- 积分抵扣的是元，积分兑换的是展示积分 -->
                    <div v-if="Data.detailInfo?.orderType === 1 && Data.detailInfo.discountPropReducePrice">
                        ￥{{ priceFilter(floatDivide(Data.detailInfo.discountPropReducePrice, 100)) }}
                    </div>
                    <div v-if="Data.detailInfo?.orderType === 6">
                        {{ floatDivide(Data.detailInfo.totalPoints, 100) }}积分
                    </div>
                    <div class="price real_price">
                        ￥{{ priceFilter(floatDivide(Data.detailInfo.orderAmountTotal, 100)) }}
                    </div>
                </div>
            </div>
        </div>

        <MarkRemark ref="remarkRef" @getOrderList="initDetail" />
    </div>
</template>
<script setup>
import { ref, reactive, onMounted, onUnmounted, computed, nextTick } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { floatDivide, floatMultiply, checkPermission, translateOrderCode, getTextWidth } from '@/commons/utils.js';
import request from '@/request';
import storage from '@/commons/storage';
import { setLayout, resetLayout } from '@/hooks/layout';
import { ElMessage } from 'element-plus';
import { toPageHandler } from '@/router/forward';
import MarkRemark from '../orderList/remark.vue';

const route = useRoute();
const router = useRouter();

const Data = reactive({
    detailInfo: {},
    goods: [],
    // 买家下单 买家付款 买家成团 商家发货 交易成功 交易关闭
    activeStep: 3,
    stepList: [],
    logInfoList: []
});
let activePackageName = ref('');

/** 商品原价总金额 */
const goodsTotal = computed(() => {
    let total = 0;
    if (Data?.detailInfo?.orderType === 6 && Data.goods[0]?.goodsType === 1) {
        total = Data.goods.reduce((pre, cur) => pre + cur.totalSellPrice, 0);
    } else {
        total = Data.goods.reduce((pre, cur) => pre + cur.total, 0);
    }
    return total;
});

const initDetail = async () => {
    let params = {
        shopId: route.query.shopId || storage.get('ZW-SHOPID'),
        orderId: route.query.orderId
    };
    let res = await request('getOrderDetailServ', params);
    let info = res.data || {};
    Data.detailInfo = res.data;
    Data.goods = res.data.goods || [];
    Data.stepList = res.data.orderStatusList || [];
    Data.activeStep =
        Data.stepList.findIndex(x => x.isComplete === 0) > -1
            ? Data.stepList.findIndex(x => x.isComplete === 0)
            : Data.stepList.length;
    Data.logInfoList = [];
    Data.goods?.forEach(x => {
        // logistics.id 唯一; logisticsNo 检查是否是一个包裹
        if (x.logistics && x.logistics.id) {
            if (!activePackageName.value) {
                activePackageName.value = x.logistics.id;
            }
            if (!Data.logInfoList.find(e => e.logisticsNo === x.logistics.logisticsNo)) {
                Data.logInfoList.push(Object.assign({ arr: [], good: [x] }, x.logistics));
                queryLogisiticsList(x.logistics.id, x.buyerUid);
            } else {
                let current = Data.logInfoList.find(e => e.logisticsNo === x.logistics.logisticsNo);
                current.good.push(Object.assign({}, x));
            }
        }
    });
    nextTick(() => {
        // 检查
        checkOverflow();
    });
};

// 获取物流信息
const queryLogisiticsList = (id, uid) => {
    request('orderLogisticsLogsServ', {
        id: id,
        buyerUid: uid,
        shopId: route.query.shopId || storage.get('ZW-SHOPID')
    }).then(res => {
        if (res.data?.data && res.data.data?.length) {
            let current = Data.logInfoList.find(x => x.id === id);
            current.arr = res.data.data;
            current.state = res.data.state;
            current.arr = current.arr.sort((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime());
        }
    });
};

const jumpActivity = () => {
    window.open(location.origin + `/marketing/group/detail?id=${Data.detailInfo.activityId}&type=group`);
};

const jumpFullActivity = item => {
    if (checkPermission('genough_list:view')) {
        ElMessage({
            type: 'error',
            message: '当前用户没有查看权限'
        });
        return false;
    }
    window.open(location.origin + `/marketing/enough/detail?id=${item.activityId}&type=group`);
};

// 是否显示商品优惠tip
const showGoodDiscountTooltip = row => {
    if (Data?.detailInfo?.orderType === 1) {
        return row.discountAmount || row.couponFee;
    }
    if (Data?.detailInfo?.orderType === 2) {
        return Data.detailInfo.discountAmount || row.couponFee;
    }
    if ([3, 4, 5].includes(Data?.detailInfo?.orderType)) {
        return Data.detailInfo.discountAmount || row.couponFee;
    }
    if (Data?.detailInfo?.orderType === 7) {
        return row.fullReduceGoodAmount || row.couponFee;
    }
};
// 订单优惠金额
const showDiscount = row => {
    if (Data?.detailInfo?.orderType === 1) {
        // 商品改价后才会包含优惠券优惠
        return row.discountAmount ? row.discountAmount - row.couponFee : '';
    }
    if (Data?.detailInfo?.orderType === 2) {
        return Data.detailInfo.discountAmount;
    }
    if ([3, 4, 5].includes(Data?.detailInfo?.orderType)) {
        return Data.detailInfo.discountAmount;
    }
    if (Data?.detailInfo?.orderType === 7) {
        return row.fullReduceGoodAmount;
    }
};

const showDiscounts = () => {
    if (Data?.detailInfo?.orderType === 1) {
        // 商品改价后才会包含优惠券优惠
        return Data?.detailInfo?.discountAmount;
    }
    if (Data?.detailInfo?.orderType === 2) {
        return Data?.detailInfo?.discountAmount;
    }
    if ([3, 4, 5].includes(Data?.detailInfo?.orderType)) {
        return Data?.detailInfo?.discountAmount;
    }
    if (Data?.detailInfo?.orderType === 7) {
        return Data?.detailInfo?.fullReduceAmount;
    }
    return Data?.detailInfo?.discountAmount;
};

// 优惠类型
const discountName = () => {
    if (Data?.detailInfo?.orderType === 1) {
        return '改价';
    }
    if (Data?.detailInfo?.orderType === 2) {
        return '秒杀';
    }
    if ([3, 4, 5].includes(Data?.detailInfo?.orderType)) {
        return '拼团';
    }
    if (Data?.detailInfo?.orderType === 7) {
        return '满减';
    }
};

const remarkRef = ref();
const editRemarkHandler = () => {
    remarkRef.value.openHandler(route.query.orderId, Data?.detailInfo?.sellerRemarks);
};

onMounted(() => {
    if (route.query.shopId && route.query.shopId != storage.get('ZW-AUTH')) {
        // 切店
        const zwauth = storage.get('ZW-AUTH');
        toPageHandler(
            zwauth,
            'shopping_mall_mp',
            () => {
                router.replace(`/order/list/detail?orderId=${route.query.orderId}`);
            },
            Number(route.query.shopId)
        );
    }
    setLayout();
    initDetail();
});

const orderRemark = ref();
const shopRemarkTip = ref(false);
// 判断商家备注是否显示了省略号
const checkOverflow = () => {
    const isOverflowing = orderRemark.value.offsetWidth;
    if (getTextWidth(orderRemark.value.innerText) > isOverflowing * 2) {
        shopRemarkTip.value = true;
    } else {
        shopRemarkTip.value = false;
    }
};

onUnmounted(() => {
    resetLayout();
});
</script>
<style lang="scss" scoped>
.order_detail_main {
    .order_remark_black {
        display: flex;
        align-items: flex-end;
        .order_remark {
            max-width: 100%;
            display: -webkit-box;
            overflow: hidden;
            -webkit-box-orient: vertical;
            white-space: normal;
            text-overflow: ellipsis;
            word-break: break-all;
            -webkit-line-clamp: 2;
            line-height: 20px;
            margin-right: 8px;
        }
        img {
            width: 16px;
            height: 16px;
            margin-bottom: 2px;
            cursor: pointer;
        }
    }
    .detail_container_header {
        :deep(.el-form-item--default) {
            margin-bottom: 5px;
            .el-form-item__label {
                color: #969696;
                line-height: 20px;
            }
            .el-form-item__content {
                color: #33302d;
                line-height: 20px;
                height: 20px;
            }
        }
    }
    :deep(.el-step__description) {
        padding: 0;
    }
    :deep(.is-finish .el-step__line) {
        background: #ff6b00;
        height: 1px;
    }
    :deep(.is-wait .el-step__line) {
        height: 1px;
        background: #eaeaea;
    }
    :deep(.is-process .el-step__line) {
        height: 1px;
        background: #eaeaea;
    }
    :deep(.el-step__icon.is-icon) {
        padding: 0 12px;
        box-sizing: content-box;
    }
    :deep(.el-tabs__nav-wrap::after) {
        height: 1px;
    }
    .span_btn {
        color: #ff6b00;
        cursor: pointer;
    }
    .detail_container_header {
        background-color: #ffffff;
        position: relative;
        padding: 24px 24px 12px;
        .herder_button {
            position: absolute;
            right: 24px;
            top: 17px;
            font-weight: 550;
            color: #33302d;
            width: 112px;
            height: 36px;
            background: #fff6f0;
            border-radius: 2px;
            border: 1px solid #ffd8bd;
            line-height: 34px;
            text-align: center;
            box-sizing: border-box;
            & :hover {
                color: #33302d;
            }
            .dot {
                width: 10px;
                height: 10px;
                background: #ff6b00;
                border-radius: 5px;
                display: inline-block;
                margin-right: 5px;
            }
        }
    }
    .title {
        font-size: 16px;
        font-weight: 550;
        color: #33302d;
        line-height: 16px;
    }
    .detail_container_step {
        background-color: #ffffff;
        margin-top: 16px;
        padding: 24px;
        font-size: 16px;
        .step_title {
            font-size: 16px;
            font-weight: 400;
            color: #585858;
            margin-top: 5px;
            position: relative;
            .step_note {
                font-size: 12px;
                font-weight: 400;
                color: #fe292b;
                position: absolute;
                white-space: nowrap;
            }
        }
        .step_num {
            width: 32px;
            height: 32px;
            text-align: center;
            line-height: 32px;
            border-radius: 50%;
            font-size: 16px;
            &.wait {
                color: #969696;
                border: 1px solid rgba(0, 0, 0, 0.15);
            }
            &.current {
                background: #ff6b00;
                color: #ffffff;
            }
            &.done {
                border: 1px solid #ff6b00;
                color: #ff6b00;
                font-size: 17px;
                line-height: 35px;
            }
            &.close {
                background: #ff6b00;
                color: #ffffff;
                line-height: 35px;
            }
        }
        .step_desc {
            font-size: 14px;
            font-weight: 400;
            color: #969696;
        }
    }
    .detail_container_order {
        margin-top: 16px;
        padding: 24px 24px 20px;
        background-color: #ffffff;
        .contents {
            display: flex;
            justify-content: space-between;

            .contents_item {
                width: 25%;
                font-size: 14px;
                font-weight: 400;
                line-height: 30px;
                padding-right: 5px;
                .sub_title {
                    font-size: 14px;
                    font-weight: 550;
                    color: #33302d;
                    line-height: 14px;
                    margin-bottom: 9px;
                }
                .label {
                    color: #969696;
                }
                .desc {
                    word-break: break-all;
                }
            }
        }
    }
    .detail_container_logistics {
        margin-top: 16px;
        padding: 24px 24px 20px;
        background-color: #ffffff;
        .contents_item_left {
            width: 50%;
            font-size: 14px;
            font-weight: 400;
            line-height: 30px;
            display: inline-block;
            vertical-align: top;
            .sub_title {
                font-size: 14px;
                font-weight: 550;
                color: #33302d;
                line-height: 14px;
                margin-bottom: 9px;
            }
            .label {
                color: #969696;
            }
            .desc {
                word-break: break-all;
            }
            .logistics_goods_item {
                display: flex;
                margin-bottom: 16px;
                img {
                    min-width: 64px;
                    min-height: 64px;
                    height: 64px;
                    width: 64px;
                }
                &_info {
                    display: flex;
                    margin-left: 8px;
                    flex-direction: column;
                    height: 64px;
                    justify-content: space-between;
                    line-height: 20px;
                    color: #33302d;
                    max-width: 60%;
                    .logistics_goods_item_info_name {
                        word-break: break-all;
                        overflow: hidden;
                        height: 40px;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2; /*显示的行数*/
                        word-break: break-all; /*可择*/
                        text-overflow: ellipsis;
                    }
                    .logistics_goods_item_info_num {
                        color: #969696;
                        font-size: 13px;
                        line-height: 13px;
                    }
                }
            }
        }
        .contents_item_right {
            display: inline-block;
            width: 50%;
            .desc {
                margin-bottom: 16px;
                font-weight: 550;
                color: #33302d;
                font-size: 16px;
            }
            .step {
                display: flex;
                .step_dot {
                    width: 8px;
                    height: 8px;
                    background: #ffffff;
                    border: 2px solid #ff6b00;
                    border-radius: 50%;
                }
                .step_line {
                    margin: 0 auto;
                    width: 1px;
                    height: 100%;
                    background-image: linear-gradient(#ffc69e 35%, rgba(255, 255, 255, 0) 0%);
                    background-position: left;
                    background-size: 1px 10px;
                    background-repeat: repeat-y;
                }
                .step_right {
                    margin-left: 3px;
                    .step_time {
                        color: #969696;
                        margin-top: -5px;
                    }
                    .step_content {
                        font-size: 14px;
                        color: #33302d;
                        min-height: 35px;
                        line-height: 20px;
                        padding: 5px 0 10px;
                    }
                }
            }
        }
    }
    .detail_container_product {
        margin-top: 16px;
        padding: 24px 24px 20px;
        background-color: #ffffff;
        .goods_item {
            display: flex;
            align-items: center;
            img {
                margin-right: 8px;
                width: 60px;
                height: 60px;
                min-width: 60px;
                min-height: 60px;
            }
            .goods_item_info {
                flex: 1;
                display: flex;
                flex-direction: column;
                height: 60px;
                justify-content: space-between;
                .goods_item_name {
                    font-size: 14px;
                    font-weight: 400;
                    color: #33302d;
                    line-height: 20px;
                    height: 40px;
                    width: 280px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    word-break: break-all;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    .sign {
                        height: 16px;
                        padding: 0 2px;
                        background: #ff6b00;
                        border-radius: 2px;
                        text-align: center;
                        line-height: 15px;
                        font-weight: 400;
                        font-size: 12px;
                        color: #ffffff;
                        display: inline-block;
                    }
                }
                .goods_item_sku {
                    font-size: 14px;
                    font-weight: 400;
                    color: #969696;
                    line-height: 14px;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    width: 280px;
                }
            }
            .status_refund {
                padding: 5px 16px;
                border-radius: 2px;
                border: 1px solid #eaeaea;
                width: 63px;
            }
        }
        .amount_footer {
            font-size: 14px;
            color: #33302d;
            line-height: 26px;
            text-align: right;
            padding: 10px 24px 18px;
            border: 1px solid #eaeaea;
            border-top: none;
            display: flex;
            justify-content: flex-end;
            .price {
                // display: inline-block;
                // min-width: 100px;
            }
            .real_price {
                color: #ff6b00;
                font-weight: 550;
            }
        }
    }
}
.w200 {
    width: 200px;
}
</style>
